<template>
	<div style=" box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
		<el-row>
			<el-col :span="24">
				<div class="grid-content bg-purple-dark">
					<p>
						住院申请
					</p>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="6"></el-col>
			<el-col :span="8" push="4">
				<div class="grid-content bg-purple-dark">
					<p>
						住院时间：
					</p>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="grid-content bg-purple-dark">
					<p>
					<div class="block">
						<el-date-picker v-model="returnReg.date" type="daterange" align="right" unlink-panels
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
							:picker-options="pickerOptions" @onclick="add()">
						</el-date-picker>
					</div>
					</p>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="18" push="3">
				<div class="grid-content bg-purple-dark">
					<el-tag type="info" effect="plain" style="width: 100%; height: 100%;">
						<el-row>
							<el-col :span="6">
								<div class="demo-image" style="padding-top: 20px;">
									<div class="block">
										<el-image style="width: 100px; height: 100px"
											src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
										</el-image>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<el-row type="flex" justify="space-around">
									<el-col>
										<p style="float: left; color: black;">神经内科</p>
										<a></a>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<div style="float: left;">
											<el-radio v-model="returnReg.departmentroom" label="1-1">1室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="1-2">2室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="1-3">3室</el-radio>
											<br>
											<div style="padding-right: 29px;">
												<el-radio v-model="returnReg.departmentroom" label="1-4">4室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="1-5">5室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="1-6">6室</el-radio>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<div style="padding-top: 50px;">
								<el-button type="primary" round>预约</el-button>
							</div>
							<div style="padding-top: 10px;">
								<a style="font-size: 15px;">￥{{returnReg.totalfee}}</a>
							</div>
						</el-row>
					</el-tag>
				</div>
			</el-col>

		</el-row>
		<el-row>
			<el-col :span="18" push="3">
				<div class="grid-content bg-purple-dark">
					<el-tag type="info" effect="plain" style="width: 100%; height: 100%;">
						<el-row>
							<el-col :span="6">
								<div class="demo-image" style="padding-top: 20px;">
									<div class="block">
										<el-image style="width: 100px; height: 100px"
											src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
										</el-image>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<el-row type="flex" justify="space-around">
									<el-col>
										<p style="float: left; color: black;">骨科</p>
										<a></a>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<div style="float: left;">
											<el-radio v-model="returnReg.departmentroom" label="2-1">1室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="2-2">2室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="2-3">3室</el-radio>
											<br>
											<div style="padding-right: 29px;">
												<el-radio v-model="returnReg.departmentroom" label="2-4">4室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="2-5">5室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="2-6">6室</el-radio>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<div style="padding-top: 50px;">
								<el-button type="primary" round>预约</el-button>
							</div>
							<div style="padding-top: 10px;">
								<a style="font-size: 15px;">￥{{returnReg.totalfee}}</a>
							</div>
						</el-row>
					</el-tag>
				</div>
			</el-col>

		</el-row>
		<el-row>
			<el-col :span="18" push="3">
				<div class="grid-content bg-purple-dark">
					<el-tag type="info" effect="plain" style="width: 100%; height: 100%;">
						<el-row>
							<el-col :span="6">
								<div class="demo-image" style="padding-top: 20px;">
									<div class="block">
										<el-image style="width: 100px; height: 100px"
											src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
										</el-image>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<el-row type="flex" justify="space-around">
									<el-col>
										<p style="float: left; color: black;">儿科</p>
										<a></a>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<div style="float: left;">
											<el-radio v-model="returnReg.departmentroom" label="3-1">1室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="3-2">2室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="3-3">3室</el-radio>
											<br>
											<div style="padding-right: 29px;">
												<el-radio v-model="returnReg.departmentroom" label="3-4">4室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="3-5">5室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="3-6">6室</el-radio>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<div style="padding-top: 50px;">
								<el-button type="primary" round>预约</el-button>
							</div>
							<div style="padding-top: 10px;">
								<a style="font-size: 15px;">￥{{returnReg.totalfee}}</a>
							</div>
						</el-row>
					</el-tag>
				</div>
			</el-col>

		</el-row>
		<el-row>
			<el-col :span="18" push="3">
				<div class="grid-content bg-purple-dark">
					<el-tag type="info" effect="plain" style="width: 100%; height: 100%;">
						<el-row>
							<el-col :span="6">
								<div class="demo-image" style="padding-top: 20px;">
									<div class="block">
										<el-image style="width: 100px; height: 100px"
											src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
										</el-image>
									</div>
								</div>
							</el-col>
							<el-col :span="12">
								<el-row type="flex" justify="space-around">
									<el-col>
										<p style="float: left; color: black;">妇产科</p>
										<a></a>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<div style="float: left;">
											<el-radio v-model="returnReg.departmentroom" label="4-1">1室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="4-2">2室</el-radio>
											<el-radio v-model="returnReg.departmentroom" label="4-3">3室</el-radio>
											<br>
											<div style="padding-right: 29px;">
												<el-radio v-model="returnReg.departmentroom" label="4-4">4室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="4-5">5室</el-radio>
												<el-radio v-model="returnReg.departmentroom" label="4-6">6室</el-radio>
											</div>
										</div>
									</el-col>
								</el-row>
							</el-col>
							<div style="padding-top: 50px;">
								<el-button type="primary" round>预约</el-button>
							</div>
							<div style="padding-top: 10px;">
								<a style="font-size: 15px;">￥{{returnReg.totalfee}}</a>
							</div>
						</el-row>
					</el-tag>
				</div>
			</el-col>

		</el-row>

	</div>
</template>
<script>
	export default {
		mounted:function(){
				this.$axios.get('http://localhost:8080/hospitalization.json').then((result) => {
					this.returnReg = result.data; //写法固定
					console.log(returnReg);
				}).catch((err) => {
					console.log(err);
				})
			},
		data() {
			return {
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [end, start]);

						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() + 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [end, start]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() + 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [end, start]);
						}
					}]
				},
				returnReg:[],
				fee: '300'
			};
		},
		watch: {
			'returnReg.date': function(nVal, oVal) {
				this.returnReg.totalfee = ((nVal[1] - nVal[0]) / 3600 / 1000 / 24) * this.returnReg.fee
				console.log(((nVal[1] - nVal[0]) / 3600 / 1000 / 24))
			}
		},
		methods: {
			add() {
				this.returnReg.totalfee = (this.returnReg.date[1] - this.returnReg.date[0])
				console.log(this.returnReg.totalfee)
			}
		}
	};
</script>
<style>
	p {
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
		font-weight: bold;
		font-size: 25px;
	}
</style>
